<template>
  <page-header-wrapper :title="false">
    <a-card title="发票详情">
      <template slot="extra">
        <a-button icon="upload" size="small" type="danger" @click="uploadModal">补充发票信息</a-button>
      </template>
      <a-divider orientation="left"><b>发票信息</b></a-divider>
      <a-alert :message="`您的发票申请，开票总额￥ ${invoiceData.amount}`" type="info" banner />
      <a-descriptions bordered :column="2" style="margin-top:10px">
        <a-descriptions-item label="发票状态">
          {{invoiceData.status}}
        </a-descriptions-item>
        <a-descriptions-item label="发票类型">
          {{invoiceData.invoice_type}}
        </a-descriptions-item>
        <a-descriptions-item label="发票抬头">
          {{invoiceData.header}}
        </a-descriptions-item>
        <a-descriptions-item label="开票公司">
          {{invoiceData.company}}
        </a-descriptions-item>
        <a-descriptions-item label="申请时间">
          {{invoiceData.created_at}}
        </a-descriptions-item>
        <a-descriptions-item label="开票时间">
          {{invoiceData.invoice_time}}
        </a-descriptions-item>
        <a-descriptions-item label="发票编号">
          {{invoiceData.invoice_num}}
        </a-descriptions-item>
        <a-descriptions-item label="申请备注">
          {{invoiceData.notes}}
        </a-descriptions-item>
        <a-descriptions-item label="审核信息">
          {{invoiceData.remarks}}
        </a-descriptions-item>
      </a-descriptions>
      <a-divider style="margin: 50px 0" orientation="left"><b>合同信息</b></a-divider>
      <a-table
        bordered
        size="middle"
        :row-key="(record) => record.contract_id"
        :columns="contractColumn"
        :data-source="contractData"
      >
        <template slot="contract_no" slot-scope="text, record">
          <a-button type="link" @click="$router.push({ name: 'ContractDetail', params: { id: record.contract_id } })">{{text}}</a-button>
        </template>
        <template slot="tm_name" slot-scope="text, record">
          {{text}}{{record.pt_name}}
        </template>
        <template slot="phone1" slot-scope="text, record">
          {{text}}<span v-if="record.phone2"> / {{record.phone2}}</span>
        </template>
      </a-table>
      <a-divider style="margin: 50px 0" orientation="left"><b style="color: #1890ff">物流信息</b></a-divider>
      <a-descriptions bordered layout="vertical" :column="3" style="margin-top:10px">
        <a-descriptions-item label="物流公司">
          {{expressData.express_name}}
        </a-descriptions-item>
        <a-descriptions-item label="物流单号">
          {{expressData.express_num}}
        </a-descriptions-item>
      </a-descriptions>
      <a-divider style="margin: 50px 0" orientation="left"><b>审核历史</b></a-divider>
      <a-table
        bordered
        :row-key="(record) => record.history_id"
        :columns="historyColumn"
        :data-source="historyData"
      >
      </a-table>
    </a-card>
    <a-modal
      title="补充发票信息"
      v-model="visible"
      @ok="onSubmitInvoiceInfo"
    >
      <a-form-model
        ref="invoiceForm"
        :model="invoiceForm"
        :rules="invoiceRules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="发票编号" prop="invoice_num">
          <a-input type="text" v-model="invoiceForm.invoice_num" />
        </a-form-model-item>
        <a-form-model-item label="物流公司" prop="express_name">
          <a-input type="text" v-model="invoiceForm.express_name" />
        </a-form-model-item>
        <a-form-model-item label="物流单号" prop="express_num">
          <a-input type="text" v-model="invoiceForm.express_num" />
        </a-form-model-item>
        <a-form-model-item label="电子档发票" prop="voice_electronic_file">
          <a-upload
            name="file"
            :multiple="true"
            :action="uploadUrl"
            :headers="headers"
            @change="handleChange"
          >
            <a-button> <a-icon type="upload" /> 上传电子档发票 </a-button>
          </a-upload>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import invoiceColumns from '@/columns/invoice'
import { getAddInfo, getInvoiceDetail, postAddInfo } from '@/api/invoice'
import apis from '@/api'

export default {
  name: 'InvoiceDetail',
  data () {
    return {
      invoiceData: {},
      contractColumns: invoiceColumns.contract,
      historyColumn: invoiceColumns.history,
      contractColumn: invoiceColumns.contractColumn,
      contractData: [],
      expressData: {},
      historyData: [],
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
      invoiceRules: {
        invoice_num: [{ required: true, message: '必须填写发票编号', trigger: 'blur' }],
        express_name: [{ required: true, message: '必须填写物流公司名称', trigger: 'blur' }],
        express_num: [{ required: true, message: '必须填写物流单号', trigger: 'blur' }]
        // voice_electronic_file: [{ required: true, message: '电子发票必须上传', trigger: 'blur' }]
      },
      invoiceForm: {},
      visible: false,
      headers: {
        'Access-Token': storage.get(ACCESS_TOKEN)
      },
      uploadUrl: apis.Upload,
      expressColumns: invoiceColumns.express,
      invoiceInfo: []
    }
  },
  activated () {
    this.getInvDetail()
  },
  methods: {
    getInvDetail () {
      getInvoiceDetail(this.$route.params.id).then(res => {
        this.invoiceData = res.result.invoiceData
        this.contractData = res.result.contractData
        this.expressData = res.result.invoiceInfo
        this.historyData = res.result.invoiceCheckHistory
      })
    },
    uploadModal () {
      const app = this
      app.invoiceForm = {}
      getAddInfo(app.$route.params.id).then(res => {
        if (res.status === 0) {
          app.invoiceForm['invoice_id'] = app.$route.params.id
          app.visible = true
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    handleChange (info) {
      if (info.file.status === 'done') {
        this.invoiceForm['voice_electronic_file'] = info.file.response.result.url
      }
    },
    onSubmitInvoiceInfo () {
      const app = this
      const data = {}
      app.$refs.invoiceForm.validate(valid => {
        if (valid) {
          for (const k in app.invoiceForm) {
            data['invoiceInfos[' + k + ']'] = app.invoiceForm[k]
          }
          postAddInfo(data, app.$route.params.id).then(res => {
            if (res.status === 0) {
              app.visible = false
              app.invoiceForm = {}
              app.getInvDetail()
              app.$refs.table.refresh(true)
            } else {
              app.$warning({
                title: res.msg
              })
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
  /deep/ .ant-alert-message{
    font-size: 15px;
    font-weight: 700;
    color: rgb(245, 34, 45);
  }
</style>
